<template>
	<div class="contains">
		 <div class="main-header">
			  <div class="search">
				   <div class="search-icon">
					   <image src="../../assets/images/message_menu.png" mode=""></image>
				   </div>
				   <div class="search-input">
					    <input type="text" value="" placeholder="山地自行车" />
				   </div>
			  </div>
			  <div class="main-banner">
				   <swiper :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item) in banner">
							<view class="swiper-item">
								<image :src="host+item['pic']" mode="aspectFill"></image>
							</view>
						</swiper-item>
				   </swiper> 
			  </div> 
		 </div>
		 <div class="main-menu">
			 <div class="main-menu-cont">
				  <div class="main-menu-item" v-for="(item) in nav" :data-id="item['id']" @click="toCategory">
					   <div class="main-menu-item-icon-bg">
						    <image :src="host+item['pic']" mode="aspectFill"></image>
					   </div>
					   <div class="main-menu-item-text">{{item['name']}}</div>
				  </div>
			 </div>
		 </div>
	     <div class="recommend">
			  <div class="recommend-new"  :data-id="news['id']" @click="toDetail">
				   <div class="recommend-new-title">
					   <p>{{news['name']}}<span>新品</span></p>
					   <span>{{news['description']}}</span>
				   </div>
				   <div class="recommend-new-pic">
					    <image :src="host+news['proPic']" mode="aspectFill"></image>
				   </div>
			  </div>
			  <div class="recommend-hot">
				   <div class="recomment-hot-item" :data-id="hot[0]['id']" @click="toDetail">
					   <div class="recommend-new-title">
					   		<p>{{hot[0]['name']}} <span>热卖</span></p>
					   		<span>{{hot[0]['description']}}</span>
					   </div>
					   <div class="recommend-hot-pic">
					   		<image :src="host+hot[0]['proPic']" mode="aspectFill"></image>			   
					   </div>
				   </div>
				   <div class="recomment-hot-item"  :data-id="hot[1]['id']" @click="toDetail">
					   <div class="recommend-new-title">
					   		<p>{{hot[1]['name']}} <span>热卖</span></p>
					   		<span>{{hot[1]['description']}}</span>
					   </div>
					   <div class="recommend-hot-pic">
						   <image :src="host+hot[1]['proPic']" mode="aspectFill"></image>
					   </div>
				   </div>
			  </div>
		 </div>
		 <div class="recommend-list">
			  <div class="recommend-title">热门推荐<span></span></div>
			  <div class="recommend-item" v-for="(item) in product" :data-id="item['id']" @click="toDetail">
				   <div class="recommend-item-pic">
					   <image :src="host+item['proPic']" mode="aspectFill"></image>
				   </div> 
				   <div class="recommend-item-title">{{item['name']}}</div>
			  </div>
		 </div>
	</div>
</template>

<script>
	import { banner, nav, product ,productList } from '../../../api/index.js';
	export default {
	  components:{
	  },
	  data(){
		 return {
			 banner:[],
			 nav:[],
			 news:{},
			 hot:{},
			 product:{},
			 host:this.$domain
		 }
	  },
	  onShow() {
		this.getBanner();
		this.getNav();
		this.getProductRecommend();
		this.getProductList();
	  },
	  created(){
	  },
	  mounted(){
	  },
	  methods:{
		getBanner(){
			banner({}).then((res)=>{
				if (res.code==200){
					this.banner = res.data;
				}
			})
		},
		getNav(){
			nav().then(res=>{
				if (res.code==200){
					this.nav = res.data;
				}
			})
		},
		toDetail(e){
			var id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url:"/pages/views/detail/index?id="+id
			})
		},
		toCategory(e){
			var id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url:"/pages/views/item/index?cid="+id
			})
		},
		getProductRecommend(){
			product().then(res=>{
				if (res.code==200){
					this.news = res.news;
					this.hot = res.hot;
				}
			})
		},
		getProductList(){
			productList().then(res=>{
				if (res.code==200){
					this.product = res.data;
				}
			})
		}
	  },
	};
</script>

<style>
.main-header { position: relative; width: 100%; height: 150px; background: #1999d3;}
.search { width: 90%; height: 30px; margin: 0 auto; padding-top: 10px;}
.search-icon { width: 30px; height: 30px; display: inline-block; vertical-align: top;}
.search-icon image { width: 100%; height: 100%;}
.search-input { width: 60%; height: 30px; background: #fff; border-radius: 10px; margin-left: 10px; display: inline-block;}
.search-input input { width: 100%; height: 30px; line-height: 30px; padding-left: 10px;}
.main-banner { position: absolute; top: 50px; height: 150px; background: yellowgreen; border-radius: 5px; overflow: hidden; width: 90%; left: 50%; margin-left: -45%;}
.main-banner image { width: 100%; height: 150px;}
.main-menu { margin-top: 60px;}
.main-menu-cont { width: 90%; height: auto; margin: 0 auto; text-align: center;}
.main-menu-item { width: 60px; height: 80px; display: inline-block; margin: 0 10px; margin-bottom: 10px;}
.main-menu-item-icon-bg { width: 100%; height: 60px; border-radius: 50%;}
.main-menu-item-icon-bg image { width: 40px; height: 40px; margin-top: 10px; border-radius: 20px; overflow: hidden;}
.main-menu-item-text { font-size: 13px; height: 25px; line-height: 25px; overflow: hidden; white-space: nowrap; color: #666;}
.recommend { width: 80%; margin: 10px auto 0 auto;}
.recommend-new { width: 50%; display: inline-block; vertical-align: top;}
.recommend-new-title { font-size: 13px; color: #333;}
.recommend-new-title p span { margin-left: 5px; width: auto; height: 25px; background: #ff6666; color: #fff; padding: 0 5px; font-size: 11px; border-radius:5px;}
.recommend-new-title span { color: #666;}
.recommend-new-pic { width: 100%; height: 150px; margin-top: 10px; border-radius: 10px;}
.recommend-new-pic image { width: 100%; height: 100%;}
.recommend-hot { width: 45%; float: right; display: inline-block;}
.recommend-hot-pic { height: 60px; border-radius: 10px;}
.recommend-hot-pic image  { width: 100%; height: 100%;}
.recommend-list { width: 90%; height: auto; margin: 10px auto;}
.recomment-hot-item { margin-top: 5px;}
.recommend-title { width: 100%; height: 40px; margin-bottom: 10px; position: relative;}
.recommend-title span { display: inline-block; width: 50px; position: absolute; height: 5px; bottom: 5px; left: 5px; background:burlywood; border-radius: 2.5px;}
.recommend-item { display: inline-block; width: 40%; height: 100px; margin:5px; position: relative;}
.recommend-item-pic { height: 80px; width: 100%; border-radius: 10px; overflow: hidden;}
.recommend-item-pic image { width: 100%; height: 100%;}
.recommend-item-title { font-size: 13px; height: 30px; line-height: 30px; color: #333;}
</style>